<template>
  <div class="p10 wh100">
    <el-row>
      <el-form :inline="true" :model="param" class="left">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="param.userName" clearable placeholder="输入用户名" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20" class="wh100">
      <el-col :span="16" :xs="24">
        <ZlTable
          ref="table"
          url="/sys/user/list"
          :param.sync="param"
          :init="false"
          height="350px"
          @afterQuery="afterQuery"
          @select="select"
          @selectAll="select"
        >
          <template slot="cols">
            <el-table-column align="center" type="selection" width="50"/>
            <el-table-column prop="sex" label="" align="center" width="50">
              <template slot-scope="scope">
                <i v-if="scope.row.sex === 1" class="el-icon-male blue bold" />
                <i v-if="scope.row.sex !== 1" class="el-icon-female pink bold" />
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="姓名" align="center" />
            <el-table-column prop="username" label="用户名" align="center" />

          </template>
        </ZlTable>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-tabs type="border-card" style="height:350px">
          <el-tab-pane label="已选用户">
            <el-tag
              v-for="(o,i) in selectUser"
              :key="i"
              class="m2"
              closable
              type="warning"
              @close="removeTag(o,i)"
            >{{ o.realName }}</el-tag>
          </el-tab-pane>
        </el-tabs>
      </el-col>

    </el-row>
  </div>

</template>

<script>
import ZlTable from '@/components/table/table-con'
export default {
  name: 'UserTagCon',
  components: { ZlTable },
  data() {
    return {
      param: {
        userName: ''
      },
      selectUser: []
    }
  },
  props: {
    multi: {
      type: Boolean,
      default: true
    }
  },
  mounted() {

  },
  activated() {
    this.$refs.table.query()
  },
  methods: {
    removeTag(o, i) {
      this.selectUser.splice(i, 1)
      this.$refs.table.checkRow(o, false)
    },
    getValue() {
      return this.$util.copy(this.selectUser)
    },
    clear() {
      this.selectUser = []
      this.$refs.table.clearSelection()
    },
    select(v) {
      this.selectUser = v
      if(!this.multi){
        if(v.length > 0){
          this.$refs.table.clearSelection()
          this.$refs.table.toggleRowSelection(v[v.length-1],true)
          this.selectUser.splice(0,v.length-1)
        }
      }
      console.log('select', v)
    },
    query() {
      this.$refs.table.query()
    },
    afterQuery(list) {
      this.$nextTick(() => {
        let str = ','
        for (let i = 0; i < this.selectUser.length; i++) {
          str += this.selectUser[i].userId + ','
        }
        for (let i = 0; i < list.length; i++) {
          const u = list[i]
          if (str.includes(',' + u.userId + ',')) {
            this.$refs.table.checkRow(u, true)
          }
        }
      })
    }
  }
}
</script>
<style scoped>
  .el-tabs{
    box-sizing: border-box;
  }
  .el-dialog__header{
    padding: 10px 20px 10px;
  }
  .el-tabs__content{
    padding: 5px!important;
  }
</style>
